<template>
  <div>
    <Row class="mt10">
      <Card>
        <p slot="title">补考成绩报表</p>
        
        <Alert class="fb">共{{courseCount}}科目 共{{personTime}}人次</Alert>
        <Table border :columns="columns" :data="data1"></Table>
      </Card>
    </Row>
  </div>
</template>

<script>
export default {
  name: "",
  components: {
    // circleLoading
  },
  data() {
    function addrows(h, htmlArr) {
      var rowsArr = [];
      for (let i = 0, len = htmlArr.length; i < len; i++) {
        // 如果不是最后一项
        if (i !== len - 1) {
          //不是一个时，添加opacity：0的项进行占位
          if (htmlArr[i].rows > 1) {
            for (let j = 0, len2 = htmlArr[i].rows; j < len2 - 1; j++) {
              rowsArr.push(
                h(
                  "div",
                  {
                    attrs: {
                      class: "rowspan__child colorWrite"
                    }
                  },
                  "~_~"
                )
              );
            }
          }
          //只有一个时
          else {
            // 如果值为空时，比如备注，暂时不用了 2019-10-18 09:42:43
            // if(htmlArr[i].val==""){
            //   rowsArr.push(
            //     h(
            //       "div",
            //       {
            //         attrs: {
            //           class: "rowspan__child blank"
            //         }
            //       },
            //       "~_~!"
            //     )
            //   );
            // }
          }
          //带下横线
          rowsArr.push(
            h(
              "div",
              {
                attrs: {
                  class: "rowspan__child rowspan__child--border"
                }
              },
              [h(
                "span",
                {
                  style: {
                    top: -((htmlArr[i].rows * 40) / 2-20) + "px"
                  }
                },
                htmlArr[i].val
              )]
            )
          );
          // 最后一项不加下横线
        } else {
          rowsArr.push(
            h(
              "div",
              {
                attrs: {
                  class: "rowspan__child"
                }
              },
              htmlArr[i].val
            )
          );
        }
      }
      return h(
        "div",
        {
          attrs: {
            class: "rowspan__parent"
          }
        },
        rowsArr
      );
    }
    return {
      data: [],
      data1: [
        {
          scoreList: [
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
            {val:"66"},
          ],
          studentNoList: [
              {
                  val: "2",
                  rows: 4
              },
              {
                  val: "1",
                  rows: 2
              },
              {
                  val: "1",
                  rows: 5
              },
              {
                  val: "1 ",
                  rows: 1
              },
          ],
          courseNum: [
              {
                  val: "2",
                  rows: 4
              },
              {
                  val: "1",
                  rows: 2
              },
              {
                  val: "1",
                  rows: 5
              },
              {
                  val: "1 ",
                  rows: 1
              },
          ],
          studentList: [
            {
              val: "白金",
              rows: 4
            },
            {
              val: "敖博宇",
              rows: 2
            },
            {
              val: "安雨鑫",
              rows: 5
            },
            {
              val: "安娜 ",
              rows: 1
            },

          ],
          studentIdList: [
            {
              val:"188869101693702144",rows:4
            },
            {
              val:"188869101693702144",rows:2
            },
            {
              val:"188869101693702144",rows:5
            },
            {
              val:"188869101693702144",rows:1
            },
          ],
          teacherList: [
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
            {
              val:"白玉荣",
            },
          ],
          courseList: [
            {
              val: "语文"
            },
            {
              val: "英语"
            },
            {
              val: "语文"
            },
            {
              val: "英语"
            },
            {
              val: "语文"
            },
            {
              val: "英语"
            },
            {
              val: "语文"
            },
            {
              val: "英语"
            },
            {
              val: "语文"
            },
            {
              val: "英语"
            },
            {
              val: "语文"
            },
            {
              val: "英语"
            }
          ],
          classList: [{ val: "17级物流一班", rows: 12 }],
          // mark: [
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          //   { val: ""},
          // ],

        }
      ],
      courseCount: "4", //科目数量
      personTime: "4", //人次
      grades: [], //年度
      annualList: [], //年度
      semesterList: [], //学期
      classList: [],
      searchForm: {
        // 搜索框初始化对象
      },
      columns: [
        {
          title: "班级",
          key: "classList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        /* {
          title: '序号',
          type:'index',
          align: 'center',
          render: (h, params) => {
            var htmlArr = params.row[params.column.key]
            return addrows(h, htmlArr)
          }
        },*/
        {
          title: "姓名",
          key: "studentList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "学号",
          key: "studentNoList",
          align: "center",
          minWidth: 80,
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "补考科目",
          key: "courseList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "任课教师",
          key: "teacherList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "补考成绩",
          key: "scoreList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "补考总评",
          key: "scoreList",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
        {
          title: "科目统计",
          key: "courseNum",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        },
       /* {
          title: "备注",
          key: "mark",
          align: "center",
          render: (h, params) => {
            var htmlArr = params.row[params.column.key];
            return addrows(h, htmlArr);
          }
        }*/
      ]
    };
  },
  mounted() {
  },
  methods: {
    
  }
};
</script>
<style lang="less">
.rowspan__parent {
  margin: 0 -20px;
}

.rowspan__child {
  padding: 10px 20px;
}
.rowspan__child--border {
  border-bottom: 1px solid #e8eaec;
}
//隐藏占位符
.colorWrite {
  opacity: 0;
}
.blank{
  opacity: 1;
  height: 48px;
  padding: 0;
}
.colorWrite + .rowspan__child.rowspan__child--border>span {
  position: relative;
}
</style>
